<template>
	<view class="contents">
		<navbar title='添加团购'>
		</navbar>
		<view class="content">
			<view class="addtuan">
				<view class="aditem">
					<text class="addname">团购标题</text>
					<u-input style="flex: 1;" v-model="formData.title" type="text" placeholder='请输入' />
				</view>
				<view class="aditem flex-col">
					<text class="addname">团购副标题</text>
					<view class="mshu">
						<u-input style="flex: 1;" v-model="formData.descript" type="textarea" placeholder='请输入' />
					</view>
				</view>
				<view class="aditem" @click="cateypop = true">
					<text class="addname">商品类型</text>
					<text class="adaval">{{ classitem.label ? classitem.label : '请选择商品类型' }}</text>
					<image class="comm_icon_next" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
				<view class="aditem" @click="guishow = true">
					<text class="addname">设置规格</text>
					<text class="adaval">请设置商品规格</text>
					<image class="comm_icon_next" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
				<view class="aditem chuantu">
					<text class="addname">商品图片</text>
					<text class="chuanmiao">用于商品封面和宣传图片(第一张为封面)</text>
					<view class="tuview">

						<view class="tuitem" v-if="formData.image" @click.stop="getyulan(ossThree(formData.image))">
							<image class="tuimg" :src="ossThree(formData.image)" mode="" />
							<image class="del" @click.stop="deltu(1)" src="@/pages_client/static/img/del.png" mode="" />
						</view>
						<view class="tuitem" @click="upload(1)">
							<image class="icon_zp" src="@/pages_client/static/mine/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view>
				<view class="aditem chuantu">
					<text class="addname">商品详情图片</text>
					<text class="chuanmiao">用于介绍商品</text>
					<view class="tuview">

						<view class="tuitem" v-for="(item, index) in isArry(formData.images)" :key="index"
							@click="getyulan(ossThree(item))" v-if="formData.images">
							<image class="tuimg" :src="ossThree(item)" mode="" />
							<image class="del" @click.stop="del(index, 2)" src="@/pages_client/static/img/del.png" mode="" />
						</view>
						<view class="tuitem" v-if="isArry(formData.images).length < tunum" @click="upload(2)">
							<image class="icon_zp" src="@/pages_client/static/mine/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view>
				<view class="aditem flex-col">
					<text class="addname">使用须知</text>
					<view class="mshu">
						<u-input style="flex: 1;" v-model="formData.xuzhi" type="textarea" placeholder='请输入' />
					</view>
				</view>

				<view class="aditem">
						<text class="addname">有效期</text>
						<u-input style="flex: 1;" v-model="formData.expiration_day" type="text" placeholder='请输入有效期天数' />
				</view>
				<view class="aditem" @click="timeshow = true">
					<text class="addname">营业起止时间</text>
					<text class="adaval">{{ formData.use_times ? formData.use_times : '请选择营业时间' }}</text>
					<image class="comm_icon_next" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
				<view class="aditem flex-col">
					<text class="addname">使用规则</text>
					<view class="mshu">
						<u-input style="flex: 1;" v-model="formData.guize" type="textarea" placeholder='请输入' />
					</view>
				</view>

			</view>
			<view class="botview">
				<view class="tjia" @click="getadd">{{ formData.id?'确认修改':'确认添加' }}</view>
			</view>
		</view>

		<u-popup v-model="guishow" mode="bottom" width="100%" ref="auth" :closeable="true" :mask-close-able="false"
			:custom="true" :mask-click="false" @close="closegui">
			<view class="popone">
				<text class="xuantit">
					设置规格
				</text>
				<view class="addtuan">
					<view class="aditem">
						<text class="addname">名称</text>
						<u-input style="flex: 1;" v-model="formData.sku_name" type="text" placeholder='请输入名称' />
					</view>
					<view class="aditem">
						<text class="addname">库存</text>
						<u-input style="flex: 1;" v-model="formData.stock" type="text" placeholder='请输入库存' />
					</view>
					<view class="aditem">
						<text class="addname">价格</text>
						<u-input style="flex: 1;"  v-model="formData.price" type="number" placeholder='请输入价格' />
					</view>
					<view class="aditem">
						<text class="addname">原价</text>
						<u-input style="flex: 1;" v-model="formData.oprice" type="number" placeholder='请输入原价' />
					</view>
					<view class="aditem">
						<text class="addname">分享佣金</text>
						<u-input style="flex: 1;" v-model="formData.bfb" type="number" placeholder='请输入分享佣金' />
						%
					</view>
					<view class="fenview">
						<text class="fenmiao">用户分享产品可获得 ￥{{ getyjin(formData.price,formData.bfb) }}</text>
					</view>

				</view>
				<view class="menbot">
					<view class="mbots" @click="getxuanmen">确认</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="cateypop" :list="classlist" @confirm="seconfirm"></u-select>
		<u-select v-model="timeshow" mode="mutil-column" :list="timelist" @confirm="timeconfirm"></u-select>
</view>
</template>

<script>
import {
	baseUrl
} from '@/utils/config.js';
export default {
	data() {
		return {
			guishow: false,
			classlist: [],
			name: "",
			formData: {
				// shop_id: '',
				// title: '测试',
				// descript: '测试描述',
				// cid: '',
				// image: '/uploads/20250511/201fea0f1a9abe0097352b91130778b0.png',//主图
				// images: '/uploads/20250511/201fea0f1a9abe0097352b91130778b0.png',//详情多图
				// xuzhi: '须知',
				// price: '100',
				// oprice: '299',
				// stock: '100',
				// bfb: '10',
				shop_id: '',
				title: '',
				descript: '',
				cid: '',
				image: '',//主图
				images: '',//详情多图
				xuzhi: '',
				price: '',
				oprice: '',
				stock: '',
				bfb: '',
				sku_name: '',//名称
				id:'',
				expiration_day:'30',//有效期 默认30天
				use_times:'08:00-22:00',//营业时间
				guize:'',//使用规则
			},
			cateypop: false,
			classitem: {
				label: ''
			},
			updatetype: 1,
			tunum: 5,//最多5张图

			timeshow: false,
			timelist: [
				[
					{
						value: '8:00',
						label: '8:00'
					},
					{
						value: '9:00',
						label: '9:00'
					},
					{
						value: '10:00',
						label: '10:00'
					},
					{
						value: '11:00',
						label: '11:00'
					},
					{
						value: '12:00',
						label: '12:00'
					},
					{
						value: '13:00',
						label: '13:00'
					},
					{
						value: '14:00',
						label: '14:00'
					},
					{
						value: '15:00',
						label: '15:00'
					},
					{
						value: '16:00',
						label: '16:00'
					},
					{
						value: '17:00',
						label: '17:00'
					},
					{
						value: '18:00',
						label: '18:00'
					},
					{
						value: '19:00',
						label: '19:00'
					},
					{
						value: '20:00',
						label: '20:00'
					},
					{
						value: '21:00',
						label: '21:00'
					},
					{
						value: '22:00',
						label: '22:00'
					},
					{
						value: '23:00',
						label: '23:00'
					},
					{
						value: '0:00',
						label: '0:00'
					},
					{
						value: '1:00',
						label: '1:00'
					},
					{
						value: '2:00',
						label: '2:00'
					},
					{
						value: '3:00',
						label: '3:00'
					},
					{
						value: '4:00',
						label: '4:00'
					},
					{
						value: '5:00',
						label: '5:00'
					},
					{
						value: '6:00',
						label: '6:00'
					},
					{
						value: '7:00',
						label: '7:00'
					},

					
				],
				[
					
					{
						value: '12:00',
						label: '12:00'
					},
					{
						value: '13:00',
						label: '13:00'
					},
					{
						value: '14:00',
						label: '14:00'
					},
					{
						value: '15:00',
						label: '15:00'
					},
					{
						value: '16:00',
						label: '16:00'
					},
					{
						value: '17:00',
						label: '17:00'
					},
					{
						value: '18:00',
						label: '18:00'
					},
					{
						value: '19:00',
						label: '19:00'
					},
					{
						value: '20:00',
						label: '20:00'
					},
					{
						value: '21:00',
						label: '21:00'
					},
					{
						value: '22:00',
						label: '22:00'
					},
					{
						value: '23:00',
						label: '23:00'
					},
					{
						value: '0:00',
						label: '0:00'
					},
					{
						value: '1:00',
						label: '1:00'
					},
					{
						value: '2:00',
						label: '2:00'
					},
					{
						value: '3:00',
						label: '3:00'
					},
					{
						value: '4:00',
						label: '4:00'
					},
					{
						value: '5:00',
						label: '5:00'
					},
					{
						value: '6:00',
						label: '6:00'
					},
					{
						value: '7:00',
						label: '7:00'
					},
					{
						value: '8:00',
						label: '8:00'
					},
					{
						value: '9:00',
						label: '9:00'
					},
					{
						value: '10:00',
						label: '10:00'
					},
					{
						value: '11:00',
						label: '11:00'
					},
				],
				
			],
		}
	},
	onLoad(option) {
		if (option.shop_id) {
			this.formData.shop_id = option.shop_id
		}
		if (option.id) {
			this.formData.id = option.id
			this.huixian()
		}
		this.getcate()
	},
	onShow() {
	},
	methods: {
		async huixian(){
			let res = await this.$u.api.getTuanGoodsDetail({
				id:this.formData.id
			});
			this.formData = this.assignIfEqual(this.formData, res);
			console.log(this.formData)
		},
		assignIfEqual(target, source) {
			for (const key in source) {
				if (source.hasOwnProperty(key) && target.hasOwnProperty(key)) {
				target[key] = source[key];
				}
			}
			return target;
		},

		async getcate() {
			let res = await this.$u.api.tuangetCate({
			});
			console.log(res)
			let data = res
			let parms = []
			for (let i in data) {
				let a = {}
				a.value = data[i].id
				a.label = data[i].name
				parms.push(a)
			}
			this.classlist = parms
		},
		getnext() {
			this.navrouter("/pages_client/mine/StoreEntryTwo");
		},
		closegui() {
			this.guishow = false
		},
		seconfirm(e) {
			console.log(e)
			this.classitem = e[0]
			this.formData.cid = e[0].value
		},
		getyulan(e) {
			uni.previewImage({
				current: e, // 当前显示图片的 http 链接
				urls: [e] // 需要预览的图片 http 链接列表
			});
		},
		upload(e) {
			this.updatetype = e
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.headimg = tempFilePaths[0];
					// this.isClick = true;
					this.unloadtou()
				}
			});
		},
		unloadtou() {
			// console.log(this.head_portrait)
			let that = this
			uni.uploadFile({
				url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
				filePath: this.headimg,
				name: 'file',
				header: {
					// 'content-type': 'application/json;charset=UTF-8',
					'token': uni.getStorageSync('token'),
				},
				formData: {
					'token': uni.getStorageSync('token')
				},
				success: (uploadFileRes) => {
					if (JSON.parse(uploadFileRes.data).code == 1) {
						if (that.updatetype == 1) {
							that.formData.image = JSON.parse(uploadFileRes.data).data.url
						} else if (that.updatetype == 2) {
							let data = that.isArry(that.formData.images)
							data.push(JSON.parse(uploadFileRes.data).data.url)
							that.formData.images = data.toString()
							// console.log(that.formData.images)
						}

					} else {
						that.$u.toast(JSON.parse(uploadFileRes.data).msg);
					}
					// that.getinfo()
				}
			});
		},
		isArry(e) {
			let data = []
			if (e == '') {

			} else {
				data = e.split(",");
			}
			return data
		},
		deltu(index) {//删除单张
			let that = this
			uni.showModal({
				title: '提示',
				content: '确定删除此张图片么？',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确认", // 确认按钮的文字  
				// showCancel: false, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: (res) => {
					if (res.confirm) {
						if (index == 1) {
							//删除logo
							that.formData.image = ''
						}
					} else {
						console.log('cancel') //点击取消之后执行的代码
					}
				}
			})
		},
		del(index, type) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '确定删除此张图片么？',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确认", // 确认按钮的文字  
				// showCancel: false, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: (res) => {
					if (res.confirm) {
						that.deltwo(index, type)
					} else {
						console.log('cancel') //点击取消之后执行的代码
					}
				}
			})
		},
		deltwo(index, type) {
			if (type == 2) {
				//环境照片
				let shuzu = this.isArry(this.formData.images)
				shuzu.splice(index, 1)
				this.formData.images = shuzu.toString()
			}

		},
		async getxuanmen() {
			this.guishow = false
		},
		async getadd() {
			let formData = this.formData
			console.log(formData)
			const result = this.checkObjectEmpty(formData);
			console.log(result)
			if(!result){
				if(this.formData.id){
					let res = await this.$u.api.tuanedit(formData);
					this.$u.toast("编辑成功");
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 1000);
				}else{
					let res = await this.$u.api.tuanadd(formData);
					this.$u.toast("添加成功");
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 1000);
				}
				
			}
			
		},
		checkObjectEmpty(obj) {//检测是否为空
			for (let key in obj) {
				if (obj.hasOwnProperty(key)) {
					const value = obj[key];
					if(key == 'id'){
						return;
					}
					if (value === null || value === undefined || value === "") {
						uni.showToast({
							title: `请完善信息`,
							icon: 'none'
						});
						return true; // 只要有一个为空就返回true
					}
				}
			}
			return false; // 所有属性都不为空则返回false
		},
		getyjin(price,bfb){
			let num = 0
			num = Number(price)*(bfb/100).toFixed(2)
			return num
		},
		timeconfirm(e){
			console.log(e)
			this.formData.use_times = e[0].value+'-'+e[1].value
		}
	},

}
</script>

<style lang="scss" scoped>
page {
	background-color: #f9f9f9;
}

.content {
	background-color: #f9f9f9;
	min-height: 100vh;
	padding-bottom: 130rpx;
	padding-top: 20rpx;

	.addtuan {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;

		.aditem {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 25rpx;
			min-height: 100rpx;

			.addname {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				display: inline-block;
				min-width: 120rpx;
			}

			.adaval {
				flex: 1;
				text-align: end;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-right: 20rpx;
			}

			.comm_icon_next {
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
			}
		}

		.flex-col {
			display: flex;
			flex-direction: column !important;
			align-items: flex-start;
			padding: 25rpx 30rpx;

			.mshu {
				width: 100%;
				padding: 10rpx 20rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}
		}

		.chuantu {
			flex-direction: column;
			align-items: flex-start;
			padding: 25rpx 30rpx;

			.chuanmiao {
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				display: block;
				margin: 10rpx 0 20rpx;
			}
		}

		.tuview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tuitem {
				margin: 0 30rpx 0 0;
				width: 160rpx;
				height: 160rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;

				.icon_zp {
					width: 56rpx;
					height: 56rpx;
					position: relative;
				}

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #525357;
					position: relative;
					margin-top: 20rpx;
				}

				.tuimg {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.dianpu {
				width: 320rpx;
				height: 220rpx;

				text {
					margin-top: 140rpx;
				}
			}

			.tuchuan {
				.icon_zp {
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					margin-bottom: 0;
				}
			}
		}
	}
}

.botview {
	position: fixed;
	height: 120rpx;
	width: 100%;
	bottom: 0;
	background-color: #fff;
	z-index: 10;
	padding: 0 30rpx;
	display: flex;
	align-items: center;

	.tjia {
		width: 100%;
		height: 90rpx;
		background: #52443B;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.popone {
	width: 100%;
	// padding: 30rpx;
	background: #F5F5F5;
	border-radius: 20rpx 20rpx 0rpx 0rpx;

	.addtuan {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;

		.aditem {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 25rpx;
			min-height: 100rpx;

			.addname {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				display: inline-block;
				width: 120rpx;
			}

			.comm_icon_next {
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
			}
		}

	}

	.xuantit {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		display: block;
		text-align: center;
		padding: 30rpx 30rpx 40rpx;
	}
}

.menbot {
	height: 110rpx;
	background: #FFFFFF;
	display: flex;
	flex-direction: row;
	align-items: center;

	.mbots {
		height: 90rpx;
		background: #52443B;
		border-radius: 16rpx;
		width: 94%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.fenview {
	display: flex;
	flex-direction: row;
	margin-bottom: 30rpx;
}

.fenmiao {
	margin-left: auto;
	font-weight: 400;
	font-size: 24rpx;
	color: #666666;
	margin-left: auto;
}

/deep/.u-drawer-bottom {
	background-color: #fff !important;
}

.del {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 39rpx;
	height: 39rpx;
}</style>
